﻿@using System.Drawing;
@using System.Text.Json;
@inject IJSRuntime JSRuntime
<DemoPageSectionComponent Id="DialogsAndWindows-Popup-Resizing" ShowSizeMode="true">
    <ChildContentWithParameters Context="Params">
        <div class="target-container" @onclick="@(() => PopupVisible = true)">
            <p class="target-caption">CLICK TO SHOW A POP-UP WINDOW</p>
        </div>

        <DxPopup
            AllowResize="true"
            HeaderText="Popup"
            @bind-Visible="@PopupVisible"
            BodyText="@Constants.Text"
            SizeMode="Params.SizeMode"
            MinWidth="300"
            MinHeight="200"
            MaxWidth="800"
            MaxHeight="500"
            Width="@width"
            Height="@height"
            ResizeCompleted="OnPopupResizeCompleted">
        </DxPopup>
    </ChildContentWithParameters>
    <OptionsContent>
        <OptionButton Text="Reload Page" OnClick="ReloadPageButton_ClickAsync" />
        <OptionButton Text="Reset Popup Size" OnClick="ResetPositionButton_ClickAsync" />
    </OptionsContent>

    @code {
        bool PopupVisible { get; set; } = false;
        const string LocalStorageKey = "DialogsAndWindows-Popup-Resizing";
        string width = null, height = null;

        protected override async Task OnAfterRenderAsync(bool firstRender)
        {
            if (firstRender)
            {
                var size = await LoadSizeFromLocalStorageAsync();
                if (size is Size savedSize)
                {
                    (width, height) = ($"{savedSize.Width}px", $"{savedSize.Height}px");
                    StateHasChanged();
                }
            }
        }
        async Task OnPopupResizeCompleted(PopupResizeCompletedEventArgs args)
        {
            (width, height) = ($"{args.Size.Width}px", $"{args.Size.Height}px");
            await SaveSizeToLocalStorageAsync(args.Size);
        }

        // Refer to https://docs.microsoft.com/en-us/aspnet/core/blazor/state-management
        // to learn more about Blazor state management
        // In Blazor Server apps, prefer ASP.NET Core Protected Browser Storage
        async Task<Size?> LoadSizeFromLocalStorageAsync()
        {
            var json = await JSRuntime.InvokeAsync<string>("localStorage.getItem", LocalStorageKey);
            return string.IsNullOrEmpty(json) ? null : JsonSerializer.Deserialize<Size>(json);
        }

        async Task SaveSizeToLocalStorageAsync(Size position)
        {
            await JSRuntime.InvokeVoidAsync("localStorage.setItem", LocalStorageKey, JsonSerializer.Serialize(position));
        }

        async Task RemoveSizeFromLocalStorageAsync()
        {
            await JSRuntime.InvokeVoidAsync("localStorage.removeItem", LocalStorageKey);
        }
        async Task ReloadPageButton_ClickAsync()
        {
            await JSRuntime.InvokeVoidAsync("location.reload");
        }

        async Task ResetPositionButton_ClickAsync()
        {
            await RemoveSizeFromLocalStorageAsync();
            await JSRuntime.InvokeVoidAsync("location.reload");
        }
    }

</DemoPageSectionComponent>
